<template>
  <div class="wrap">
    <div>
      <el-button type="primary" v-on:click="queryAll()">查找所有</el-button>
      <el-button type="primary" v-on:click="dialogForm2Visible=true">添加</el-button>
      <span style="margin-left: 45%;">
         <el-input v-model="searchId" size="mini" style="width: 5%" placeholder="id搜索..."></el-input>
      <el-button icon="el-icon-search" circle @click="searchById()"></el-button>
      <el-input
        style="width: 5%"
        v-model="search"
        size="mini"
        placeholder="姓名搜索..."  >
      </el-input>
      <el-button icon="el-icon-search" circle @click="searchbyname()"></el-button>
      </span>
    </div>
<!--    <el-button type="primary" v-on:click="mydeleteAllStudentById">批量增加学生账号</el-button>-->
    <el-table
      :data="teacherList"
      style="width: 100%"
    >
      <el-table-column
        prop="teacherId"
        label="id"
        width="100">
      </el-table-column>
      <el-table-column
        prop="teacherPwd"
        label="密码"
        width="200">
      </el-table-column>
      <el-table-column
        prop="teacherName"
        label="姓名" width="150">
      </el-table-column>
      <el-table-column
        prop="teacherSex"
        label="性别" width="150">
      </el-table-column>
      <el-table-column
        prop="teacherTel"
        label="电话" width="250">
      </el-table-column>
      <el-table-column
        prop="teacherEmail"
        label="邮箱" width="250">
      </el-table-column>
      <el-table-column
        prop="roles"
        label="角色" width="100">
      </el-table-column>
      <el-table-column
        align="right" width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.$index, scope.row)">修 改</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.$index, scope.row)">删 除</el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-dialog title="修改信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editTeacher.teacherId"></el-input>
        </el-form-item>
        <el-form-item label="名字" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editTeacher.teacherName"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editTeacher.teacherPwd"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editTeacher.teacherSex"></el-input>
        </el-form-item>
        <el-form-item label="电话" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editTeacher.teacherTel"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="editTeacher.teacherEmail"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false;editStudentf()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="添加信息" :visible.sync="dialogForm2Visible">
      <el-form >
        <el-form-item label="账号" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="teacherAdd.teacherId"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth">
          <el-input  autocomplete="off" v-model="teacherAdd.teacherPwd"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogForm2Visible = false">取 消</el-button>
        <el-button type="primary" @click="dialogForm2Visible = false;adduser()">确 定</el-button>
      </div>
    </el-dialog>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10]"
      :page-size="5"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>


</template>

<script>

import {
  getAllTeacherInfo,
  addTeacher,
  editTeacherInfoById,
  deleteTeacherById,
  getTeacherInfoByName,
  getTeacherInfoById,
} from '@/api/admin/teacher/teacher'
import qs from 'qs'

export default {
  name: "student",
  data(){
    return{
      teacherList:[],
      search: '',
      dialogFormVisible: false,
      dialogForm2Visible:false,
      formLabelWidth: '120px',
      teacherAdd:{teacherId: "",teacherPwd: ""},
      editTeacher:{},
      // multipleSelection: [],
      // selectIds:[],
      searchId:'',
      currentPage: 1,
      total:1,
      pageSize:5,pageNum: 1
    }
  },
  created() {
    this.queryAll();
  },
  methods:{
    handleSizeChange(val) {
      this.pageSize=val;
      this.queryAll();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.queryAll()
    },
    searchById(){
      getTeacherInfoById(qs.stringify({teacherid:this.searchId})).then(res => {
        this.teacherList = res.data.teachers
      }).catch(function (error) {
        //console.log(error);
      });
     }
    //
    // mydeleteAllStudentById(){
    //   this.multipleSelection.forEach(student => {
    //     this.selectIds.push(student.studentId)
    //   })
    //   // qs.stringify(this.selectIds)
    //   //console.log(this.selectIds.toString())
    //   deleteAllStudentById(this.selectIds.toString()).then(res =>{
    //     //this.selectIds=[]
    //     if (res.status==200){
    //       this.queryAll()
    //     }else {
    //
    //     }
    //
    //   }).catch(err => {
    //     console.log("批量删除错误")
    //   })
    //   //   console.log(this.selectIds)
    //     //deleteAllStudentById()
    // },
    //
    // handleSelectionChange(val) {
    //   this.multipleSelection = val;
    // }
      ,
    adduser(){
      let userData = {
        teacherId:this.teacherAdd.teacherId,
        teacherPwd:this.teacherAdd.teacherPwd,
      }
      let data = qs.stringify(userData);

      addTeacher(data).then(res =>{
        if (res.status==200){
          this.teacherList.push(this.teacherAdd)
          this.teacherAdd={teacherId: "",teacherPwd: ""}
        }else {
          console.log("添加失败")
        }
      }).catch(err => {
        console.log('添加student失败',err)
      })


    },
    editStudentf(){
      let userData = {
        teacherId:this.editTeacher.teacherId,
        teacherPwd:this.editTeacher.teacherPwd,
        teacherName:this.editTeacher.teacherName,
        teacherSex:this.editTeacher.teacherSex,
        teacherTel:this.editTeacher.teacherTel,
        teacherEmail:this.editTeacher.teacherEmail
      }
      let data = qs.stringify(userData);

      editTeacherInfoById(data).then( res =>{
        if (res.status==200){
          //
        }
      }).catch(err => {
        console.log('更新student失败',err)
      })
    },
    queryAll() {
      getAllTeacherInfo(this.pageNum,this.pageSize).then( res =>{
        this.teacherList = res.data.teachers
        this.total = res.data.total
      }).catch(err => {
        console.log('获取student失败',err)
      })
    },
    handleEdit(index, row) {
      this.editTeacher=this.teacherList[index]
      this.dialogFormVisible = true
    },
    handleDelete(index, row) {

      deleteTeacherById(qs.stringify({teacherid : this.teacherList[index].teacherId})).then(res =>{
        this.teacherList.splice(index,1)
      }).catch(function (error) {
        //console.log(error);
      });

    },
    searchbyname(){
      getTeacherInfoByName(qs.stringify({teachername:this.search})).then(res => {
        this.teacherList = res.data.teachers
      }).catch(function (error) {
        //console.log(error);
      });
    }
  }
}
</script>

<style lang="scss" scoped>
  .wrap{
    width: 2000px;
    height: 100%;
    margin-left: 10px;
    margin-top: 10px;
    /*background-color: #3a835d;*/
  }
  .el-table{
    width: 2000px;
  }

  .el-table::before {
    left: 0;
    bottom: 0;
    /* width: 63%; */
    width: 100%;
    height: 1px;
  }

</style>
